
<template>



  <div class="app-container" >

    <div style="height:100%; width:100%; position:fixed; _position:absolute; top:0; z-index:1000;">

      <router-link :to="'/package/edit/'+this.$route.params.id">
        <el-button type="primary" style="position: absolute; margin-top: 135px ;margin-left: 980px">编辑</el-button>
      </router-link>
      <el-button type="success" @click="toUsing" v-if="form.state==0||form.state==2" style="position: absolute;  margin-top: 235px ;margin-left: 980px">{{form.state==0?'通过':'启用'}}</el-button>
      <el-button type="success" @click="submitAgain" v-if="form.state==3" style="position: absolute; margin-top: 235px ;margin-left: 980px">提交</el-button>
      <el-button type="danger" @click="toStop" v-if="form.state==1" style="position: absolute; margin-top: 335px ;margin-left: 980px">停用</el-button>
      <el-button type="warning" @click="toReject" v-if="form.state==0" style="position: absolute; margin-top: 335px ;margin-left: 980px">驳回</el-button>
      <el-button  type="info" @click="toReback"  style="position: absolute; margin-top: 435px ;margin-left: 980px">返回</el-button>



    </div>
    <el-form ref="form" :model="form" label-width="120px" >
      <el-form-item label="服务包名称" >
        <el-input  v-model="form.name" :readonly="true" />
      </el-form-item>
      <el-form-item label="服务包类型" >
        <el-select v-model="form.typeId" placeholder="服务包类型" >
          <el-option v-for="level in levels" :key="level.id" :label="level.name" :value="level.id" />
        </el-select>
      </el-form-item >
      <el-form-item label="服务包标签">
        <el-tag type="success" v-for="lab in pLabels" :key="lab">{{getLabelName(lab)}}</el-tag>
      </el-form-item>
      <el-form-item label="服务包图片" >
        <div v-for="imag in form.images" v-if:="imagesV" class="pic"  style="float: left; margin-right: 10px">
          <img :src="imag.images"  width="260px">
        </div>
      </el-form-item>

      <el-form-item label="服务包价格/元">
        <el-input v-model="form.price" />
      </el-form-item>
      <el-form-item label="服务对象">
        <el-input v-model="form.object"/>
      </el-form-item>
      <el-form-item label="签约周期/年">
        <el-input v-model="form.cycle"/>
      </el-form-item>

      <el-form-item label="续费状况">
          <label>  不可续签</label> <el-switch v-model="form.renew" active-value=1 inactive-value=0 /> <label> 可续签</label>
      </el-form-item>
      <el-form-item label="服务包状态">
        <el-radio-group v-model="form.state"  v-if:="stateV">
          <el-radio label="0" >未审核</el-radio>
          <el-radio label="1" >使用中</el-radio>
          <el-radio label="2" >停用</el-radio>
          <el-radio label="3" >驳回</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.notes" type="textarea"/>
      </el-form-item>


      <el-form-item label="服务项目">
        <el-table :data="items" fit highlight-current-row>
<!--          <el-table-column type="selection" width="55"></el-table-column>-->

          <el-table-column prop="id" label="项目编号" width="100"></el-table-column>
          <el-table-column prop="name" label="项目名称" width="100" ></el-table-column>
          <el-table-column prop="times" label="次数"  width="100"></el-table-column>
          <el-table-column prop="type" label="项目类型" width="100">
            <template slot-scope="scope">
              {{scope.row.type==0?'免费':'付费'}}
            </template>
          </el-table-column>
          <el-table-column prop="price" label="项目原价（元）"  width="150"></el-table-column>
          <el-table-column prop="introduce" label="项目介绍"  width="460"></el-table-column>
        </el-table>


      </el-form-item>

      <el-form-item label="服务包操作记录">
        <el-table :data="records" fit highlight-current-row v-if="stateV">
          <!--          <el-table-column type="selection" width="55"></el-table-column>-->

          <el-table-column prop="packageId" label="服务包编号" width="150"></el-table-column>
          <el-table-column prop="processDoctorId" label="操作者" width="150" >
            <template slot-scope="scope">{{getDoctorName(scope.row.processDoctorId)}}</template>
          </el-table-column>
          <el-table-column prop="time" label="时间"  width="260"></el-table-column>
          <el-table-column prop="state" label="类型" width="260">
            <template slot-scope="scope">
              <label v-if="scope.row.state==0">提交服务包</label>
              <label v-if="scope.row.state==1">审核通过</label>
              <label v-if="scope.row.state==2">停用服务包</label>
              <label v-if="scope.row.state==3">驳回提交</label>
              <label v-if="scope.row.state==4">编辑服务包</label>
              <label v-if="scope.row.state==5">重新启用服务包</label>
              <label v-if="scope.row.state==6">新建服务包</label>
            </template>
          </el-table-column>
        </el-table>


      </el-form-item>



    </el-form>
  </div>

</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      itemIds:[],
      items:[],
      allItem:[],
      levels:[],
      form: {

      },
      addItemList:[],
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      imagesV:false,
      pLabels:[],
      stateV:true,
      records:[],
      doctors:[]
    }
  },
  methods: {
    toReback(){
      this.$router.go(-1)
    },
    getDoctorName(id){
      if(id==0)return 'admin'
      let name=''
      this.doctors.forEach(doctor=>{
        if(doctor.id==id)name=doctor.name
      })
      return name
    },
    loggg(){
      //console.log(this.form)
    },
    getLevel(){
      axios.get('http://localhost:8080/package-type').then(r=>{
        console.log(r.data.data)
        this.levels=r.data.data;
      })
    },
    onSubmit() {
      this.$message('submit!')
    },
    onCancel() {
      this.$router.go(-1)
    },
    handleRemove(file) {
      console.log(1111);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    getLabelName(id){
      console.log(id+'-----'+this.pLabels)
      let name=''
      this.labels.forEach(label=>{
        if(label.id==id) name=label.name;
      })
      return name;
    },
    toUsing(){
      this.stateV=false

      //通过
      if(this.form.state==0){
        this.form.state='1'
        axios.post('http://localhost:8080/package-record',{packageId: this.form.id, processDoctorId: 0, state: 1, submitDoctorId: 0
        }).then(r=>{
          axios.put('http://localhost:8080/package',this.form).then(r=>{
            this.stateV=true
            this.getRecord()
          })
        })
      }else{
        //启用
        this.form.state='1'
        axios.post('http://localhost:8080/package-record',{packageId: this.form.id, processDoctorId: 0, state: 5, submitDoctorId: 0
        }).then(r=>{
          axios.put('http://localhost:8080/package',this.form).then(r=>{
            this.stateV=true
            this.getRecord()
          })
        })
      }
    },
    submitAgain(){
      this.stateV=false
      //重新提交
      this.form.state='0'
      axios.post('http://localhost:8080/package-record',{packageId: this.form.id, processDoctorId: 0, state: 0, submitDoctorId: 0
      }).then(r=>{
        axios.put('http://localhost:8080/package',this.form).then(r=>{
          this.stateV=true
          this.getRecord()
        })
      })
    },
    toStop(){
      this.stateV=false
      this.form.state='2'
      axios.post('http://localhost:8080/package-record',{packageId: this.form.id, processDoctorId: 0, state: 2, submitDoctorId: 0
      }).then(r=>{
        axios.put('http://localhost:8080/package',this.form).then(r=>{
          this.stateV=true
          this.getRecord()
        })
      })
    },
    toReject(){
      this.stateV=false
      this.form.state='3'
      axios.post('http://localhost:8080/package-record',{packageId: this.form.id, processDoctorId: 0, state: 3, submitDoctorId: 0
      }).then(r=>{
        axios.put('http://localhost:8080/package',this.form).then(r=>{
          this.stateV=true
          this.getRecord()
        })
      })
    },
    getRecord(){
      axios.post('http://localhost:8080/package-record/search/1/100',{other: {package_id:this.$route.params.id }}).then(r=>{
        this.records=r.data.data.data

        this.records.forEach(r=>{
          r.time=r.time.replace(/T/g,'   ')
        })
      })
    }
  },
   created(){

    axios.post('http://localhost:8080/doctor/search/1/1000',{}).then(r=>{
      this.doctors=r.data.data.data
    })

    axios.post('http://localhost:8080/package-record/search/1/100',{other: {package_id:this.$route.params.id }}).then(r=>{
      this.records=r.data.data.data

      this.records.forEach(r=>{
        r.time=r.time.replace(/T/g,'   ')
      })
    })


     axios.get('http://localhost:8080/label').then(r=>{
       this.labels=r.data.data;

       axios.post('http://localhost:8080/package-label-contact/search/'+1+'/'+100,{other:{package_id:this.$route.params.id}}).then(r=>{

         r.data.data.data.forEach(label=>{
           this.pLabels.push(label.labelId);
         })


       })
     })

     axios.post('http://localhost:8080/package-item-contact/search/'+1+'/'+100,{other:{package_id:this.$route.params.id}}).then(r=>{
      this.itemIds=r.data.data.data;
       for(let i=0;i<this.itemIds.length;i++){
         axios.post('http://localhost:8080/item/search/'+1+'/'+100,{other:{id:this.itemIds[i].itemId}}).then(r=>{
           this.items.push(r.data.data.data[0])
         })
       }
    })


    axios.post('http://localhost:8080/package/search/'+1+'/'+1,{other:{id:this.$route.params.id}}).then(r=>{
      this.form=r.data.data.data[0];
      this.form.renew+=''
      this.form.state+=''
      console.log(this.form)
      axios.get('http://localhost:8080/package-images-contact/'+this.$route.params.id).then(r=>{
        this.form.images=r.data.data;

        console.log(this.form.images)
        this.imagesV=true;
        this.$forceUpdate();
      })
    })




    this.getLevel();
  },
  mounted() {



    }


}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

